import React, { useState } from 'react';
import style from './yqback.module.css';
import { Select } from 'antd';
import { LoadingOutlined } from '@ant-design/icons';
import { Button, Empty, Spin } from 'antd'; // 引入Spin组件用于显示加载状态  
import empy from '../../assets/Yiqixiu/empy.png';

function YQBacklog() {
    const [loading, setLoading] = useState(false); // 加载状态  
    const [selectedValue, setSelectedValue] = useState('全部类型'); // 已选项  

    const handleChange = (value: string) => {
        console.log(`selected ${value}`);
        setSelectedValue(value); // 更新已选项  
        setLoading(true); // 开始加载  

        // 模拟异步操作，例如API调用  
        setTimeout(() => {
            // 假设这是API调用完成后的操作  
            setLoading(false); // 加载完成  
        }, 1000); // 延迟1秒  
    };

    return (
        <div className={style.container}>
            <div className={style.top}>
                <h1>待办事项</h1>
                <div>
                    <Select
                        value={selectedValue} // 绑定已选项  
                        style={{ width: 150 }}
                        onChange={handleChange}
                    >
                        {/* 这里使用了children来渲染选项，而不是options属性，因为Ant Design的Select组件通常使用children来渲染选项 */}
                        <Select.Option value="全部类型">全部类型</Select.Option>
                        <Select.Option value="协作共享通知">协作共享通知</Select.Option>
                        <Select.Option value="全员分发">全员分发</Select.Option>
                        <Select.Option value="写作共享申请">写作共享申请</Select.Option>
                        <Select.Option value="协作权限申请">协作权限申请</Select.Option>
                    </Select>
                </div>
            </div>
            <div style={{ width: '420px', height: '220px', marginLeft: '440px' }}>
                {loading &&<Spin style={{marginLeft:'200px',marginTop:'50px'}} indicator={<LoadingOutlined spin />} />} {/* 显示加载状态 */}
                {!loading && (
                    <div>
                        <Empty
                            style={{ padding: '24px 0' }}
                            image={empy}
                            description='您尚未加入任何团队，可去创建团队开始协作'
                        />
                        <Button type='primary' style={{ marginLeft: '170px' }}>创建团队</Button>
                    </div>
                )}

            </div>

        </div>
    );
}

export default YQBacklog;